<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制拆解</title>
</head>
<body>
    <!-- 
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
     -->
     <canvas id="c1" width="600" height="400">
        如果浏览器不支持canvas，那么就会把这个标签当作普通标签，就会显示canvas里面的文字
     </canvas>

     <script>
        // 画一个矩形
        // 1.找到画布
        var c1 = document.querySelector("#c1")

        // 2.获取画笔，画笔就是上下文对象
        var ctx = c1.getContext("2d")

        ctx.rect(100, 100, 200, 200)  // 画一个矩形
        ctx.stroke()    // 显示路径
        // 上两句代码等同于 ctx.strokeRect(100, 100, 200, 200)

        ctx.rect(150, 150, 250, 250)   // 画一个矩形
        ctx.fill()   // 填充
        // // 上两句代码等同于 ctx.fillRect(150,150, 200,200)
     </script>
</body>
</html>